<template>
    <div class="page-container">
        <h1 class="page-title">心理医生</h1>
        <div class="content-wrapper">
            <el-card class="intro-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h2>心理医生介绍</h2>
                    </div>
                </template>
                <div class="card-content">
                    <p>
                        我们的心理医生团队由经验丰富的专业人士组成，他们在各自的领域都有丰富的临床经验和研究背景。
                    </p>
                    <p>
                        无论您面临什么样的心理健康问题，我们的专家团队都能为您提供专业的指导和支持。
                    </p>
                </div>
            </el-card>

            <!-- 搜索和筛选 -->
            <div class="filter-section">
                <el-input
                    placeholder="搜索心理医生"
                    prefix-icon="Search"
                    v-model="searchKeyword"
                    class="search-input"
                />

                <div class="filter-items">
                    <el-select
                        v-model="specializationFilter"
                        placeholder="专业领域"
                        clearable
                    >
                        <el-option
                            v-for="item in specializations"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>

                    <el-select
                        v-model="experienceFilter"
                        placeholder="工作经验"
                        clearable
                    >
                        <el-option
                            v-for="item in experiences"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>

                    <el-select v-model="sortBy" placeholder="排序方式">
                        <el-option
                            v-for="item in sortOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>

            <!-- 医生列表 -->
            <div class="psychologist-list">
                <el-card
                    v-for="(doctor, index) in filteredDoctors"
                    :key="index"
                    class="doctor-card"
                    shadow="hover"
                >
                    <div class="doctor-header">
                        <el-avatar
                            :size="80"
                            :src="doctor.avatar"
                            class="doctor-avatar"
                        >
                            <el-icon><User /></el-icon>
                        </el-avatar>
                        <div class="doctor-title">
                            <h3>
                                {{ doctor.name }}
                                <span class="title">{{ doctor.title }}</span>
                            </h3>
                            <div class="tags">
                                <el-tag
                                    v-for="(tag, i) in doctor.specializations"
                                    :key="i"
                                    size="small"
                                    effect="plain"
                                    >{{ tag }}</el-tag
                                >
                            </div>
                            <div class="rating">
                                <el-rate
                                    v-model="doctor.rating"
                                    disabled
                                    text-color="#ff9900"
                                />
                                <span>({{ doctor.reviewCount }}条评价)</span>
                            </div>
                        </div>
                    </div>

                    <div class="doctor-info">
                        <p class="info-item">
                            <strong>执业年限：</strong>{{ doctor.experience }}年
                        </p>
                        <p class="info-item">
                            <strong>咨询方式：</strong
                            >{{ doctor.consultationTypes.join('、') }}
                        </p>
                        <p class="info-item">
                            <strong>咨询费用：</strong
                            ><span class="price">¥{{ doctor.price }}/次</span>
                        </p>
                        <p class="doctor-intro">{{ doctor.introduction }}</p>
                    </div>

                    <div class="doctor-actions">
                        <el-button
                            type="primary"
                            @click="makeAppointment(doctor)"
                            >预约咨询</el-button
                        >
                        <el-button type="info" plain @click="viewDetail(doctor)"
                            >查看详情</el-button
                        >
                    </div>
                </el-card>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="totalDoctors"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="handlePageChange"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 搜索和筛选
const searchKeyword = ref('')
const specializationFilter = ref('')
const experienceFilter = ref('')
const sortBy = ref('rating')

// 分页
const currentPage = ref(1)
const pageSize = ref(6)
const totalDoctors = ref(12)

// 筛选选项
const specializations = [
    { value: '抑郁症', label: '抑郁症' },
    { value: '焦虑障碍', label: '焦虑障碍' },
    { value: '婚姻家庭', label: '婚姻家庭' },
    { value: '青少年心理', label: '青少年心理' },
    { value: '人际关系', label: '人际关系' }
]

const experiences = [
    { value: '0-3', label: '0-3年' },
    { value: '3-5', label: '3-5年' },
    { value: '5-10', label: '5-10年' },
    { value: '10+', label: '10年以上' }
]

const sortOptions = [
    { value: 'rating', label: '评分从高到低' },
    { value: 'experience', label: '经验从高到低' },
    { value: 'price-asc', label: '价格从低到高' },
    { value: 'price-desc', label: '价格从高到低' }
]

// 心理医生数据
const doctors = ref([
    {
        id: 1,
        name: '王医生',
        title: '心理咨询师',
        avatar: '',
        specializations: ['抑郁症', '焦虑障碍', '婚姻家庭'],
        experience: 10,
        consultationTypes: ['线上咨询', '线下面询'],
        price: 300,
        rating: 4.8,
        reviewCount: 126,
        introduction:
            '临床心理学博士，有10年心理咨询经验，擅长治疗抑郁症、焦虑障碍和婚姻家庭问题。'
    },
    {
        id: 2,
        name: '李医生',
        title: '心理咨询师',
        avatar: '',
        specializations: ['青少年心理', '学习障碍', '情绪管理'],
        experience: 8,
        consultationTypes: ['线上咨询'],
        price: 280,
        rating: 4.6,
        reviewCount: 98,
        introduction:
            '儿童青少年心理专家，关注青少年心理健康，帮助解决学习障碍、情绪管理等问题。'
    },
    {
        id: 3,
        name: '张医生',
        title: '高级心理咨询师',
        avatar: '',
        specializations: ['压力管理', '职场心理', '人际关系'],
        experience: 12,
        consultationTypes: ['线上咨询', '线下面询'],
        price: 320,
        rating: 4.9,
        reviewCount: 156,
        introduction:
            '职场心理专家，专注于压力管理、职场适应和人际关系问题，助您找回工作生活平衡。'
    },
    {
        id: 4,
        name: '刘医生',
        title: '临床心理学家',
        avatar: '',
        specializations: ['创伤治疗', '失眠', '心理康复'],
        experience: 15,
        consultationTypes: ['线下面询'],
        price: 350,
        rating: 4.7,
        reviewCount: 113,
        introduction:
            '创伤治疗专家，擅长处理各类心理创伤、失眠问题，帮助患者心理康复。'
    },
    {
        id: 5,
        name: '陈医生',
        title: '心理咨询师',
        avatar: '',
        specializations: ['婚姻家庭', '情感困扰', '个人成长'],
        experience: 9,
        consultationTypes: ['线上咨询', '线下面询'],
        price: 290,
        rating: 4.5,
        reviewCount: 87,
        introduction:
            '婚姻家庭治疗师，擅长处理婚姻危机、亲子关系、情感困扰等问题，促进家庭和谐。'
    },
    {
        id: 6,
        name: '赵医生',
        title: '资深心理咨询师',
        avatar: '',
        specializations: ['焦虑障碍', '强迫症', '恐惧症'],
        experience: 11,
        consultationTypes: ['线上咨询'],
        price: 310,
        rating: 4.8,
        reviewCount: 142,
        introduction:
            '焦虑障碍治疗专家，擅长治疗各类焦虑症状、强迫症和恐惧症，帮助患者重获内心平静。'
    }
])

// 筛选医生
const filteredDoctors = computed(() => {
    let result = [...doctors.value]

    // 搜索关键词
    if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        result = result.filter(
            (doctor) =>
                doctor.name.toLowerCase().includes(keyword) ||
                doctor.introduction.toLowerCase().includes(keyword) ||
                doctor.specializations.some((s) =>
                    s.toLowerCase().includes(keyword)
                )
        )
    }

    // 专业领域筛选
    if (specializationFilter.value) {
        result = result.filter((doctor) =>
            doctor.specializations.includes(specializationFilter.value)
        )
    }

    // 经验筛选
    if (experienceFilter.value) {
        const [min, max] = experienceFilter.value.split('-')
        if (max === '+') {
            result = result.filter((doctor) => doctor.experience >= Number(min))
        } else {
            result = result.filter(
                (doctor) =>
                    doctor.experience >= Number(min) &&
                    doctor.experience <= Number(max)
            )
        }
    }

    // 排序
    if (sortBy.value === 'rating') {
        result.sort((a, b) => b.rating - a.rating)
    } else if (sortBy.value === 'experience') {
        result.sort((a, b) => b.experience - a.experience)
    } else if (sortBy.value === 'price-asc') {
        result.sort((a, b) => a.price - b.price)
    } else if (sortBy.value === 'price-desc') {
        result.sort((a, b) => b.price - a.price)
    }

    return result
})

// 处理页面变化
const handlePageChange = (page) => {
    currentPage.value = page
    // 在真实项目中，这里会请求对应页码的数据
}

// 预约咨询
const makeAppointment = (doctor) => {
    console.log('预约咨询', doctor)
    ElMessage.success(`您已成功预约${doctor.name}的咨询，请等待确认`)
}

// 查看详情
const viewDetail = (doctor) => {
    console.log('查看详情', doctor)
    // 跳转到医生详情页
}
</script>

<style scoped>
.page-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    font-weight: normal;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-header h2 {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: normal;
}

.card-content p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #666;
}

/* 筛选区域 */
.filter-section {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.search-input {
    width: 250px;
}

.filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex: 1;
}

/* 医生列表 */
.psychologist-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.doctor-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.doctor-header {
    display: flex;
    margin-bottom: 15px;
}

.doctor-avatar {
    background: #4086f4;
    color: #fff;
    margin-right: 15px;
}

.doctor-title {
    flex: 1;
}

.doctor-title h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.title {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    margin-left: 8px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.rating {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #999;
}

.rating span {
    margin-left: 5px;
}

.doctor-info {
    margin-bottom: 15px;
}

.info-item {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.price {
    color: #ff6b6b;
    font-weight: 500;
}

.doctor-intro {
    margin: 10px 0;
    color: #666;
    line-height: 1.6;
    font-size: 14px;
}

.doctor-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .psychologist-list {
        grid-template-columns: 1fr;
    }

    .filter-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-input {
        width: 100%;
    }

    .filter-items {
        width: 100%;
    }
}
</style>
